<template>
  <div class="user-container">
    <Search
      @show-dialog="handleShowDialigClick"
      @delete-batch="handleDeleteBatch"
      @query="handleQueryClick"
    ></Search>
    <el-divider></el-divider>
    <Table ref="tableRef" @show-dialog="handleUpdateClick"></Table>

    <AddDialog ref="AddDialogRef" @reload="handleReload"></AddDialog>
  </div>
</template>

<script lang="ts" setup>
import Search from './c-search.vue'

import Table from './c-table.vue'
import AddDialog from './c-add-dialog.vue'
import { ref } from 'vue'
import type { UserType } from '@/types'

const AddDialogRef = ref()
const tableRef = ref()

const handleShowDialigClick = () => {
  AddDialogRef.value.changeShowFlag()
}
const handleReload = () => {
  tableRef.value?.reload()
}

const handleDeleteBatch = () => {
  tableRef.value?.removeBatch()
}

const handleUpdateClick = (userInfo: UserType) => {
  AddDialogRef.value.changeShowFlag(userInfo)
}

const handleQueryClick = (param: any) => {
  tableRef.value.getUserPage(param)
}
</script>

<style scoped lang="scss">
.user-container {
  padding: 20px 20px 0;
  width: 100%;
}
</style>
